<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加客户</title>
    <style type="text/css">
        table {
            background-color: #CCCCCC;
            border: 1px;
            width: 100%;
        }

        table tr {
            height: 20px;
        }

        table tr div {
            text-align: right;
        }

        td font {
            color: red;
        }

        .mylable{
            color: red;
            font-size: 12px;
        }

    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        /**检查用户名是否为空*/
        function checkUserName() {
            var name = $("#clientname").val();
            $("#name_lable").empty(); //清空提示信息
            if (name == "") {
                $("#clientname").after("<label id='name_lable' class='mylable'>用户名不能为空</label>"); //添加提示信息
                return false;
            }
            return true;
        }
        /**检查年龄是否合法*/
        function checkAgeFrom() {
            var age = $("#age").val();
            $("#age_lable").empty();
            if (age == "") {
                $("#age").after("<label id='age_lable'  class='mylable'>年龄不能为空</label>");
                return false;
            } else if (checkAge(age) == false) {
                $("#age").after("<label id='age_lable'  class='mylable'>年龄是0-100的数字</label>");
                return false;
            }
            return true;
        }

        /**检查邮箱是否为空**/
        function checkEmail() {
            var email = $("#email").val();
            $("#email_lable").empty();
            if (email == "") {
                $("#email").after("<label id='email_lable'  class='mylable'>邮箱不能为空</label>");
                return false;
            }
            return true;
        }

        /**检查表单输入*/
        function checkForm() {
            var u = checkUserName();
            var a = checkAgeFrom();
            var e = checkEmail();
            return u && a && e;
        }
        //年龄是0-100的数字
        function checkAge(age) {
            var flag = false;
            for (var i = 0; i <= 100; i++) {
                if (age == i) {
                    flag = true;
                    break;
                }
            }
            return flag;
        }

        $(function () {
            $("form[name='client_form']").submit(function () {
                if (checkForm()) {
//                     alert("添加会员信息成功!");
                    
                    return true;
                }
                return false;
            });

            $("input[name='clientname']").blur(function(){
                checkUserName();
            });

            $("input[name='age']").blur(function(){
                checkAgeFrom();
            });

            $("input[name='email']").blur(function(){
                checkEmail();
            });
        });

    </script>

</head>
<body>

<div>
    <form name="clienttype" action="useradd.servlet" method="post">
        <table>
            <tr bgcolor="#f0f0f0">
                <td>
                    <div>客户类别:</div>
                </td>
                <td><select name="clienttypeid">
                    <option value="">大客户</option>
                    <option value="">小客户</option>
                </select>
                </td>

            </tr>
            <tr bgcolor="#f5f5f5">
                <td>
                    <div><font>*</font> 姓名:</div>
                </td>
                <td>
                    <input id="clientname" type="text" name="clientname" value="" size="30">
                </td>
            </tr>
            <tr bgcolor="#f5f5f5">
                <td>
                    <div><font>*</font> 年龄:</div>
                </td>
                <td><input id="age" type="text" name="age" value="" size="30"></td>

            </tr>
            <tr bgcolor="#f0f0f0">
                <td>
                    <div>性别:</div>
                </td>
                <td>
                    <select name="sex">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </td>

            </tr>
            <tr bgcolor="#f5f5f5">
                <td>
                    <div>出生年月:</div>
                </td>
                <td>
                    <input type="text" name="birthday" value="" size="30">
                </td>

            </tr>
            <tr bgcolor="#f0f0f0">
                <td>
                    <div>所属公司:</div>
                </td>
                <td><input type="text" name="company" value="" size="30"></td>

            </tr>
            <tr bgcolor="#f5f5f5">
                <td>
                    <div>职务:</div>
                </td>
                <td><input type="text" name="business" value="" size="30"></td>

            </tr>
            <tr bgcolor="#f0f0f0">
                <td>
                    <div>电话:</div>
                </td>
                <td><input type="text" name="tel" value="" size="30"></td>

            </tr>
            <tr bgcolor="#f5f5f5">
                <td>
                    <div>地址:</div>
                </td>
                <td><input type="text" name="adress" value="" size="30"></td>

            </tr>
            <tr bgcolor="#f0f0f0">
                <td>
                    <div><font>*</font>邮箱:</div>
                </td>
                <td><input id="email" type="text" name="email" value="" size="30"></td>

            </tr>
            <tr bgcolor="#f5f5f5">
                <td>
                    <div>业务往来情况:</div>
                </td>
                <td><textarea name="businessinfor" rows="5" cols="32"></textarea></td>

            </tr>
            <tr bgcolor="#f0f0f0">
                <td>
                    <div>客户照片:</div>
                </td>
                <td><input type="file" name="filepic"></td>

            </tr>
            <tr bgcolor="#f5f5f5">
                <td>
                    <div>事件提醒:</div>
                </td>
                <td><input type="text" name="eventawoke" value="" size="30"></td>
            </tr>
            <tr bgcolor="#f0f0f0">
                <td></td>
                <td colspan="2"><input type="submit" value="提交">
                    <input type="reset" value="重置"></td>
            </tr>
        </table>
    </form>

    <table>
        <tr bgcolor="#f5f5f5">
            <td bgcolor="#FFFFFF"><em>注意:名称前有*的为必填项</em></td>
        </tr>
    </table>
</div>
<!--<div class="alert_cotainer">
    <h2>提示信息:</h2>
    <p>添加客户成功!</p>
</div>-->
</body>
</html>